<template>
	<view class="content">
		<template v-for="item in directoryContent" :key="item">
			<button type="primary" @click="handleItemClick(item.path)">{{item.name}}</button>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				directoryContent: [{
						name: '01_认识uniapp',
						path: '/pages/01_know_uniapp/01_know_uniapp'
					},
					{
						name: '02_uniapp内置组件',
						path: '/pages/02_built_in_cpns/02_built_in_cpns'
					},
					{
						name: '03_uni组件',
						path: '/pages/03_uni_cpns/03_uni_cpns'
					},
					{
						name: '04_跨端编译注释',
						path: '/pages/04_compiler_uni/04_compiler_uni'
					},
					{
						name: '05_路由跳转',
						path: '/pages/05_navigate_uni/05_navigate_uni'
					},
					{
						name: '06_页面生命周期',
						path: '/pages/06_page_life_cycle/06_page_life_cycle'
					},
					{
						name: '07_组件生命周期',
						path: '/pages/07_cpns_life_cycle/07_cpns_life_cycle'
					},
					{
						name: '08_event事件',
						path: '/pages/08_event_emin_on/08_event_emin_on'
					},
					{
						name: '09_setupApi',
						path: '/pages/09_setup_api/09_setup_api'
					},
					{
						name: '10_pinia',
						path: '/pages/10_pinia/10_pinia'
					},
				]
			}
		},
		onLoad() {
			console.log('home onLoad');
			// 通过事件总线在拿到详情传递回来的数据
			uni.$on('acceptDataEvent', this.acceptDataEvent)
		},
		onUnload() {
			console.log('home onUnload');
			uni.$off('acceptDataEvent', this.acceptDataEvent)
		},
		methods: {
			handleItemClick(url) {
				uni.navigateTo({
					url
				})
			},
			acceptDataEvent(value) {
				console.log('这是从acceptDataEvent传递过来的数据:', value);
			},
		}
	}
</script>

<style scoped>
	.content {
		margin: 0 auto;
		width: 600rpx;
	}

	button {
		margin-bottom: 10rpx;
	}
</style>